<template>
  <div>
    <swiper style="height:250px;" indicator-dots="true" autoplay="true" interval="3000" duration="500" circular="true" indicator-color="rgba(228,228,228,1)" indicator-active-color="#FECA49">
      <block v-for="(item,index) in imgUrls" :key="index">
        <swiper-item class="image_container">
          <div class="img-div">
            <image :src="item" class="slide-image"/>
          </div>
        </swiper-item>
      </block>
    </swiper>
    <van-row>
    <van-col span="12" v-for="(card,i) in GiftCardTpls" :key="i">
      <div class="card" @click="handleCard(card)">
        <image :src="card.picture_urls[0].url" class="card-item-img" />
        <div class="card-title">{{card.title}}</div>
      </div>
    </van-col>
    </van-row>
    <div class="purchase-record">
      <span @click="purchaseRecord" style="text-decoration: underline;">购买记录</span>
      <span @click="receiveRecord" style="text-decoration: underline;margin-left:15px;">领取记录</span>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import {
  mapState,
  mapActions,
  mapGetters
} from 'vuex'
export default {
  data() {
    return {
      GiftCardTpls:[],
      imgUrls: [
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531997314376&di=14a488a6c4164a590d3b9f0db8d14150&imgtype=0&src=http%3A%2F%2Fimg4.21food.cn%2Fimg%2Falbum%2F2017%2F7%2F27%2Fbjwccy61700011.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531997419636&di=e32a565cd9b800b32874312e253106c6&imgtype=0&src=http%3A%2F%2Fimg4.21food.cn%2Fimg%2Falbum%2F2017%2F7%2F27%2Fbjwccy61809043.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531997443172&di=f9df2f76fc397d74d569c9c7d225dad1&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D774516569%2C3812917885%26fm%3D214%26gp%3D0.jpg'
      ],
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'login_info'
    ])
  },
  methods: {
    handleCard(item){
      wx.navigateTo({url: '/pages/user/gift_card/gift_card_list?id='+item.id})
    },
    purchaseRecord(){
      wx.navigateTo({url: '/pages/user/gift_card/purchase_record'})
    },
    receiveRecord(){
      wx.navigateTo({url: '/pages/user/gift_card/receive_record'})
    }
  },
  async mounted() {
    console.log('brand_id=>',this.login_info.brand_id)
    let result = await api.findGiftCardTpls({brand_id:this.login_info.brand_id,status:'enable'})
    if(result.code == 0){
      this.GiftCardTpls = result.data.data
    }
  }
}
</script>

<style>
page{
  background: #F9F9F9;
}
.image_container{
  width: 100%;
  height: 500px;
}
.slide-image{
  width: 100%;
  height: 100%;
}
.img-div{
  height: 100%;
  overflow: hidden;
}
.card{
  margin: 10px;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.card-item-img{
  width: 100%;
  height: 110px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid white;
  margin-bottom: -4px;
}
.card-title{
  text-align: center;
  font-size:14px;
  color:#565656;
  background:#fff;
  height: 30px;
  line-height: 30px;
}
.purchase-record{
  width: 100%;
  text-align: center;
  color: #00A760;
  font-size: 16px;
  padding-top: 15px;
  padding-bottom: 15px;
}
</style>